@import "wholeDefine";

.HistoryCardRoot {
    width: 100%;
    height: 100%;
    border-radius: 1.0667vw;
    background-color: $itembg;
    display: flex;
    flex-direction: column;
    .HistoryCardTitle {
        border-radius: 1.0667vw 1.0667vw 0 0;
        font-size: 2.1333vw;
        color: $title-1;
        padding: 0.6667vw;
        text-align: center;
        padding-top: 8px;
    }
    .HistoryCardContent {
        text-indent: 2em;
        text-align: left;
        font-size: 1.8667vw;
        color: $text-1;
        padding: 0.6667vw;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        line-height: 20px;
        padding: 10px;
        div {
            flex: 1 1;
        }
    }
    .HistoryCardFooter {
        padding: 0.6667vw;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        font-size: 1.6vw;
        color: $text-2;
        padding-bottom: 8px;
        div {
            flex: 1 1;
        }
        .HistoryCardYear {
            text-align: left;
            padding-left: 10px;
        }
        .HistoryCardLunar {
            text-align: right;
            padding-right: 10px;
        }
    }
}